import React, { useEffect, useState } from 'react'
import { ResultPage, Card, Popup, CalendarPickerView, Switch, Button, Swiper,Image } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import styles from './home.module.css'
import dayjs from 'dayjs'
import axios from 'axios'

function Index() {
  const [visible5, setVisible5] = useState(false)
  const [cityDate, setCityDate] = useState(dayjs().format('YYYY-MM-DD'))
  const [cityWeek, setCityWeek] = useState(dayjs().format('dddd'))
  // 点击日历选择日期后关闭
  const Fetch = (val) => {
    setCityDate(dayjs(val).format('YYYY-MM-DD'))
    setCityWeek(dayjs(val).format('dddd'))
    setVisible5(false)
  }

  // 走马灯
  const banner = [
    'https://gw.alipayobjects.com/zos/bmw-prod/b874caa9-4458-412a-9ac6-a61486180a62.svg',
    'https://react-vant.3lang.dev/logo.svg'
  ]

  const [data,setData]=useState([])
  const DataList=async()=>{
    const res=await axios.get('/api/news')
    console.log('res',res)
    setData(res.data.data)
  }
  useEffect(()=>{
    DataList()
  },[])

  return (
    <div>
      <ResultPage
        status=''
        title='火车票预订'
        description='便捷购票，服务您的每一次出行'
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={styles.city}>
            <span>北京</span>
            <LoopOutline />
            <span>上海</span>
          </div>
          {/* 弹出日历 */}
          <div onClick={() => setVisible5(true)} className={styles.rl}>
            <span>{cityDate}</span>
            <span style={{ color: '#ccc' }}>{cityWeek}(今天)</span>
          </div>
          <div className={styles.wz}>
            <span style={{ color: '#ccc' }}>只看高铁/动车</span>
            <Switch />
          </div>
          <div>
            <Button block color='warning' shape='default'>
              搜索
            </Button>
          </div>
          
        </ResultPage.Card>
        <Swiper autoplay>{
            banner.map((item, index) => (
              <Swiper.Item key={index}>
                <Image  src={item} style={{height:'80px'}}></Image>
              </Swiper.Item>
            ))}</Swiper>

        <Card style={{ marginTop: 12 }}>
          <div className={styles.cx}>
            <span className={styles.kx}>出行快迅</span>
            <span>更多</span>
          </div>
          <div className={styles.zl}>
            {
              data.map((item,index)=>{
                return <div key={index}>
                  <span>{item.id}</span>
                  <span>{item.title}</span>
                  <img src={item.image} style={{width:'20px',height:"20px"}} />
                </div>
              })
            }
          </div>
        </Card>
      </ResultPage>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
        <CalendarPickerView
          min={Date.now()}
          max={Date.now() + 10 * 24 * 60 * 60 * 1000}
          onChange={(val) => Fetch(val)} />
      </Popup>
    </div>
  )
}

export default Index
